<template>
    <div id="home">
        <!-- <BaseHeader
          :title="devName"
          @leftClick="closeWindow()"
          @rightClick="$router.push('setting')"
        /> -->
        <BaseHeaderNone />
        <div class="content" :style="{ paddingTop: `${headerHeight}px` }">
            <div v-show="faultCodes.length " class="tip-wrapper">
                <div class="tip-space"></div>
            </div>
            <WarningInfo />
            <WarningInfo2></WarningInfo2>
            <!-- 设备展示模块 -->
            <HomeDeviceShow />
            <!-- 连接状态栏 -->
            <HomeStatusBar />
            <!-- 数据控制功能区 -->
            <div class="module-box">
                <!-- 状态 -->
                <HomeSwiper></HomeSwiper>
                <HomeControlBar :name="$t('translate12')" :isenglish="$i18n.locale == 'en-US'" iconName="ic_position"
                    :active="true" @handleClick="handleClick1" :info="selectList[siteSelection]"
                    :disabled="childLockSwitch == 1 || pause == 1">
                    <div>
                        <ul class="spinnerWrap appear" v-show="isWarp1">
                            <li v-for="(i, index) in selectList" :key="index" :class="siteSelection == index ? 'spinnerList checkedBg' : 'spinnerList'
                                " @click="handlSelect1(index)">
                                {{ i }}
                            </li>
                        </ul>
                    </div>

                </HomeControlBar>
                <HomeControlBar :name="$t('translate16')" iconName="ic_pattren" @handleClick="handleClick2" :active="true"
                    :info="selectList2Text" :disabled="childLockSwitch == 1 || pause == 1">
                    <div class="spinnerWrap appear" v-show="isWarp2">
                        <ul>
                            <li v-for="(i, index) in selectList2" :key="index" :class="modeSelect == i.id ? 'spinnerList checkedBg' : 'spinnerList'
                                " @click="handlSelect2(i.id)">
                                {{ i.name }}
                            </li>
                        </ul>
                    </div>
                </HomeControlBar>
                <HomeControlBar1 style="width: 100%" :disabled="false">
                </HomeControlBar1>
                <!-- 气囊调节 -->
                <HomeStep :name="$t('translate24')" style="width: 100%" @handlLeftStart="handlLeftStart1"
                    @handlLeftEnd="handlEnd1" @handlRightStart="handlRightStart1" @handlRightEnd="handlEnd1"
                    :disabled="childLockSwitch == 1 || pause == 1"></HomeStep>
                <HomeStep :name="$t('translate25')" style="width: 100%" @handlLeftStart="handlLeftStart2"
                    @handlLeftEnd="handlEnd2" @handlRightStart="handlRightStart2" @handlRightEnd="handlEnd2"
                    :disabled="childLockSwitch == 1 || pause == 1"></HomeStep>
               


                 <!-- 童锁 -->
                <HomeControlBar :name="$t('translate28')" iconName="ic_stop" @handleClick="stop" :active="pause"
                    :disabled="childLockSwitch == 1" :info="$t('opened')">
                </HomeControlBar>
               
                <HomeControlBar :name="$t('translate30')" iconName="ic_tongsuo" @handleClick="tongsuo"
                    :active="childLockSwitch" :info="$t('opened')">
                </HomeControlBar>
              
                <p
                    style="width:100%;font-size: 1.6rem; color: var(--emui_text_primary);padding-left:1.8rem ;padding-top:2rem ;padding-bottom:0.8rem ;line-height: 1.6rem;">
                    {{ $t('translate36') }}
                </p>

                <HomeControlBar :name="$t('translate37')" iconName="ic_tel" :active="true" style="width: 100%"
                    info="400-820-7682">
                </HomeControlBar>
                <messagePrivacy></messagePrivacy>
                <!-- 原生和自定义设置切换 
            <HomeControlBar1
              :name="settingText"
              @handleClick="setSettingVisibleTitle"
              v-show="false"
            >
            </HomeControlBar1> -->
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import HomeDeviceShow from "@/components/HomeDeviceShow.vue";
import HomeStatusBar from "@/components/HomeStatusBar.vue";
import HomeControlBar1 from "@/components/HomeControlBar1.vue";
import HomeControlBar from "@/components/HomeControlBar.vue";
import HomeSwiper from "@/components/HomeSwiper.vue";
import HomeStep from "@/components/HomeStep.vue";
import WarningInfo from "@/components/WarningInfo.vue";
import WarningInfo2 from "@/components/WarningInfo2.vue";
import messagePrivacy from "@/components/messagePrivacy.vue";

export default {
    name: "Home",
    components: {
        HomeDeviceShow,
        HomeStatusBar,
        HomeControlBar1,
        HomeControlBar,
        HomeSwiper,
        HomeStep,
        WarningInfo,
        WarningInfo2,
        messagePrivacy
    },
    data() {
        return {
            settingText: "默认设置页",
            isShowSettingTitle: true,
            hasCheckOta: false,
            value: 50,
            isWarp1: false,
            isWarp2: false,
            mode: 0,
            font:'1.6rem',
            timer: "",
            selectNum: 0,
            selectList: [
                this.$t("translate13"), this.$t("translate14"), this.$t("translate15")
            ],
            selectList2: [{ name: this.$t("translate17"), id: 7 },
            { name: this.$t("translate18"), id: 5 },
            { name: this.$t("translate19"), id: 9 },
            { name: this.$t("translate20"), id: 2 },
            { name: this.$t("translate21"), id: 1 },
            { name: this.$t("translate22"), id: 8 },
            { name: this.$t("translate211"), id: 3 },
            { name: this.$t("translate23"), id: 10 }]
        };
    },
    wacth: {
        canControl: {
            handler(val) {
                if (!val || this.hasCheckOta) return;
                this.hasCheckOta = true;
            },
        },
    },
    computed: {
        ...mapActions(["setTitleVisible"]),
        ...mapState(["devName", "singleTravel", "LRairpressure", "Midairpressure", "darkMode"]),
        ...mapState({
            siteSelection: (state) => state.siteSelection.siteSelection,
            modeSelect: (state) => state.modeSelect.action,
            pause: (state) => state.pause.on,
            oneKeyReset: (state) => state.oneKeyReset.action,
            childLockSwitch: (state) => state.childLockSwitch.on,
            privacyStatement: (state) => state.privacyStatement.privacyStatement,
            inPrivate: (state) => state.privacyStatement.inPrivate,
            legAdjustment: (state) => state.legControl.action,
            headAdjustment: (state) => state.headControl.action,
            // ModeSwitch: (state) => state.SmartWaistMode.ModeSwitch,
        }),
        ...mapGetters(["headerHeight", "imgPath", "canControl", "faultCodes"]),
        isShare() {
            return false;
        },
        activeColor() {
            return this.darkMode ? "#317af7" : "#0A59F7";
        },
        selectList2Text() {
            let name = ""
            this.selectList2.forEach(element => {
                if (element.id == this.modeSelect) {
                    name = element.name
                    return
                };
            });
            return name;
        },
        legAdjustmentValue: {
            get() {
                return this.legAdjustment;
            },
            set(i) {
                if (this.childLockSwitch == 1 || this.pause == 1) {
                    return
                }

                let contents = {};
                contents.sid = "legControl";
                contents.data = {};
                contents.data.action = i;
                this.$store.commit("UPDATE_DEVICE_DATA", contents);

            },
        },
        headAdjustmentValue: {
            get() {
                return this.headAdjustment;
            },
            set(i) {
                if (this.childLockSwitch == 1 || this.pause == 1) {
                    return
                }
                let contents = {};
                contents.sid = "headControl";
                contents.data = {};
                contents.data.action = i;
                this.$store.commit("UPDATE_DEVICE_DATA", contents);

            },
        },
    },
    methods: {
        setSettingVisibleTitle() {
            this.$store.dispatch("setTitleVisible", this.isShowSettingTitle);
            this.isShowSettingTitle = !this.isShowSettingTitle;
            this.settingText =
                this.isShowSettingTitle == true ? "自定义设置页" : "默认设置页";
        },
        //跳转OTA升级界面
        popUpdate() {
            this.$router.push("/DeviceInfo");
        },
        hidden() {
            this.isWarp1 = false;
            this.isWarp2 = false;
        },
       
       
        ctrl5() { },
        stop() {
            let data = {
                pause: {
                    on: this.pause ? 0 : 1,
                },
            };
            this.$store.dispatch("setDevInfo", data);
            this.hidden();
        },
        homing() {
            let data = {
                oneKeyReset: {
                    action: this.oneKeyReset ? 0 : 1,
                },
            };
            this.$store.dispatch("setDevInfo", data);
            this.hidden();
        },
        tongsuo() {
            let data = {
                childLockSwitch: {
                    on: this.childLockSwitch ? 0 : 1,
                },
            };
            this.$store.dispatch("setDevInfo", data);
            this.hidden();
        },
        inPrivatePattren() {
            let data = {
                privacyStatement: {
                    inPrivate: this.inPrivate ? 0 : 1,
                },
            };
            this.$store.dispatch("setDevInfo", data);
            this.hidden();
        },
        zhihan() {
            this.$router.push("/HealthManage");
        },
        wakeup() {
            this.$router.push("/AutoWake");
        },
        smfx() {
            this.$router.push({ path: "/versionInfo", query: { 'active': "m" } });
        },
        conceal() {
            this.$router.push("/Instructions");
        },
        //此方法可以跳转到任意商品详情页
        //地址格式“/ + product + / 产品编号.html ”
        handleClick1() {
            this.isWarp2 = false
            this.isWarp1 = !this.isWarp1

        },
        handleClick2() {
            this.isWarp1 = false
            this.isWarp2 = !this.isWarp2

        },
        handlSelect1(i) {
            let data = {
                siteSelection: {
                    siteSelection: i,
                },
            };
            this.$store.dispatch("setDevInfo", data);
            this.hidden();
        },
        handlSelect2(i) {
            let data = {
                modeSelect: {
                    action: i,
                },
            };
            this.$store.dispatch("setDevInfo", data);
            this.hidden();
        },
        // 返回九宫格
        closeWindow() {
            this.$store.dispatch("finishDeviceActivity");
        },

        handlLeftStart2() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "腿部调节-下降");
                let data = {
                    legControl: {
                        action: 2,
                    },
                };
                console.log(new Time().logTime + JSON.stringify(data));
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
                // this.$store.commit("UPDATE_STATE", {
                //     name: "LRairpressure",
                //     value: 2,
                // });
            }, 300)
        },
        handlEnd2() {
            clearInterval(this.timer)
            // if (this.isShare) {
            //     return;
            // }
            console.log(new Time().logTime + "腿部调节-停止");
            let data = {
                legControl: {
                    action: 0,
                },
            };
            window.hilink.setDeviceInfoWithoutCallback(
                "0",
                JSON.stringify(data)
            );
            // this.$store.commit("UPDATE_STATE", {
            //     name: "LRairpressure",
            //     value: 0,
            // });
        },
        handlRightStart2() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "腿部调节-上升");
                let data = {
                    legControl: {
                        action: 1,
                    },
                };
                console.log(new Time().logTime + JSON.stringify(data));
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
            }, 300)
            // this.$store.commit("UPDATE_STATE", {
            //     name: "LRairpressure",
            //     value: 1,
            // });
        },

        handlLeftStart1() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "头部调节-下降");
                let data = {
                    headControl: {
                        action: 2,
                    },
                };
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
            }, 300)


            // this.$store.commit("UPDATE_STATE", {
            //     name: "Midairpressure",
            //     value: 2,
            // });
        },
        handlEnd1() {
            clearInterval(this.timer)
            // if (this.isShare) {
            //     return;
            // }
            console.log(new Time().logTime + "头部调节-停止");
            let data = {
                headControl: {
                    action: 0,
                },
            };
            window.hilink.setDeviceInfoWithoutCallback(
                "0",
                JSON.stringify(data)
            );
            // this.$store.commit("UPDATE_STATE", {
            //     name: "Midairpressure",
            //     value: 0,
            // });
        },
        handlRightStart1() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "头部调节-上升");
                let data = {
                    headControl: {
                        action: 1,
                    },
                };
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
                // this.$store.commit("UPDATE_STATE", {
                //     name: "Midairpressure",
                //     value: 1,
                // });
            }, 300)
        },
        handlLeftStart3() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "左头调节-下降");
                let data = {
                    rheadAdjustment: {
                        lheadAdjustment: 2,
                    },
                };
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
                // this.$store.commit("UPDATE_STATE", {
                //     name: "Midairpressure",
                //     value: 2,
                // });
            }, 300)
        },
        handlEnd3() {
            clearInterval(this.timer)
            // if (this.isShare) {
            //     return;
            // }
            console.log(new Time().logTime + "左头调节-停止");
            let data = {
                rheadAdjustment: {
                    lheadAdjustment: 0,
                },
            };
            window.hilink.setDeviceInfoWithoutCallback(
                "0",
                JSON.stringify(data)
            );
            // this.$store.commit("UPDATE_STATE", {
            //     name: "Midairpressure",
            //     value: 0,
            // });
        },
        handlRightStart3() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "左头调节-上升");
                let data = {
                    rheadAdjustment: {
                        lheadAdjustment: 1,
                    },
                };
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
                // this.$store.commit("UPDATE_STATE", {
                //     name: "Midairpressure",
                //     value: 1,
                // });
            }, 300)
        },
        handlLeftStart4() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "右头调节-下降");
                let data = {
                    rheadAdjustment: {
                        rheadAdjustment: 2,
                    },
                };
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
                // this.$store.commit("UPDATE_STATE", {
                //     name: "Midairpressure",
                //     value: 2,
                // });
            }, 300)
        },
        handlEnd4() {
            clearInterval(this.timer)
            // if (this.isShare) {
            //     return;
            // }
            console.log(new Time().logTime + "右头调节-停止");
            let data = {
                rheadAdjustment: {
                    rheadAdjustment: 0,
                },
            };
            window.hilink.setDeviceInfoWithoutCallback(
                "0",
                JSON.stringify(data)
            );
            // this.$store.commit("UPDATE_STATE", {
            //     name: "Midairpressure",
            //     value: 0,
            // });
        },
        handlRightStart4() {
            this.hidden();
            this.timer = setTimeout(() => {
                console.log(new Time().logTime + "右头调节-上升");
                let data = {
                    rheadAdjustment: {
                        rheadAdjustment: 1,
                    },
                };
                window.hilink.setDeviceInfoWithoutCallback(
                    "0",
                    JSON.stringify(data)
                );
                // this.$store.commit("UPDATE_STATE", {
                //     name: "Midairpressure",
                //     value: 1,
                // });
            }, 300)
        },
    },
    mounted() {
        // let h=getComputedStyle(document.getElementsByClassName('leftTop')[0]).height
        // if(parseInt(h)>30){
        //     this.font='1.4rem'
        // }else{
        //     this.font='1.6rem'
        // }
        // console.log(":::",h)
        try {
            window.hilink.setTitleVisible(true, "window.Ag.setTitleVisible");
            window.Ag.setTitleVisible = (res) => { };
        } catch (err) { }

        // 物理返回键
        window.goBack = () => {
            if (this.showUpdate) {
                return;
            } else if (this.showOtaUpdate) {
                this.hideOtaUpdate();
                return;
            }
            this.closeWindow();
        };
    },
};
</script>

<style lang="less" scoped>
@import url("../style/home.less");

.card {
    width: 100%;

    .volume {
        width: calc(100% - 4.4rem);
        height: 6.4rem;
        display: flex;
        justify-content: left;
        justify-items: flex-start;
        align-content: center;
        align-items: center;
        border-radius: 1.6rem;
        padding: 0 1.6rem;
        margin: 0 auto;
        margin-bottom: 1.2rem;
        background: var(--emui_card_panel_bg);

        &.disable {
            opacity: .4;
        }

        .left {
            width: 30%;
            height: auto;
            text-align: left;
            min-height: 3.9rem;
            color: var(--emui_text_primary);
            font-size: 1.6rem;

            .leftTop {
                color: var(--emui_text_primary);
                font-size: 1.6rem;

            }

            p {
                color: var(--emui_text_secondary);
                margin-top: 0.2rem;
                font-size: 1.2rem;
                text-align: left;
            }
        }

        .right {
            width: 70%;
            position: relative;
            font-size: 1rem;
            color: var(--emui_mask_regular);

            .leftNumber {
                position: absolute;
                left: 0;
                top: 13px;
            }

            .secondNumber {
                position: absolute;
                left: 25%;
                top: 13px;
            }

            .threeNumber {
                position: absolute;
                left: calc(50% - 5px);
                top: 13px;
            }

            .leftNumber1 {
                position: absolute;
                left: 0;
                top: 13px;
            }

            .secondNumber1 {
                position: absolute;
                left: calc(50% - 5px);
                top: 13px;
            }

            .threeNumber1 {
                position: absolute;
                right: 0;
                top: 13px;
            }

            .fourNumber {
                position: absolute;
                left: 75%;
                top: 13px;
            }

            .rightNumber {
                position: absolute;
                right: 0;
                top: 13px;
            }
        }
    }



    /deep/.van-slider__button {
        width: 1.8rem;
        height: 1.8rem;
    }

}

.dark .card {
    width: 100%;

    .volume {
        width: calc(100% - 4.4rem);
        height: 6.4rem;
        display: flex;
        justify-content: left;
        justify-items: flex-start;
        align-content: center;
        align-items: center;
        border-radius: 1.6rem;
        padding: 0 1.6rem;
        margin: 0 auto;
        margin-bottom: 1.2rem;
        background: var(--emui_card_panel_bg);

        &.disable {
            opacity: .4;
        }

        /deep/.van-slider {
            // top: -0.5rem;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .left {
            color: rgba(255, 255, 255, 0.86);
            width: 30%;
            text-align: left;
            min-height: 3.9rem;
            font-size: 1.6rem;

            .leftTop {
                color: rgba(255, 255, 255, 0.86);
                font-size: 1.6rem;

            }

            p {
                margin-top: 0.2rem;
                font-size: 1.2rem;
                text-align: left;
                color: rgba(255, 255, 255, 0.6);
            }
        }


        .right {
            width: 70%;
            position: relative;
            color: rgba(255, 255, 255, 0.86);


        }
    }
}

/deep/.spinnerWrap {
    position: absolute;
    padding: 0.4rem 0 0.4rem 0;
    width: calc(100% - 1.2rem);
    overflow: hidden;
    overflow-y: auto;
    background: var(--emui_dropbox_bg);
    border-radius: 1.6rem;
    bottom: 8.8rem;
    box-shadow: 0 0.3rem 5rem var(--emui_color_divider_horizontal2);
    display: block;
    z-index: 9;
    max-height: 24rem;

    // &::-webkit-scrollbar {
    //     width: 3px;

    //     // background-color: red;
    // }

    // &::-webkit-scrollbar-thumb {
    //     width: 5px;
    //     display: none;
    //     background: fade(#5291ff, 60%);
    // }

    // &::-webkit-scrollbar-thumb:hover {
    //     width: 5px;
    //     display: block;
    //     background: fade(#5291ff, 60%);
    // }



}

// .spinnerWrap::-webkit-scrollbar {
//     width: 12px;
//     background-color: #F5F5F5;
//     margin-right: 20px;
//     margin-bottom: 20px;
// }

// .spinnerWrap::-webkit-scrollbar-thumb {
//     -webkit-transform: scale(0.4);
//     -webkit-transform: rotate(90deg);
//     background: fade(#5291ff, 90%);
// }

// .spinnerWrap::-webkit-scrollbar-track {
//     // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
//     // border-radius: 0;
//     // opacity: 0;
//     // height: 90%!important;
//     // background: fade(#5291ff, 30%);
// }


.spinnerWrap .spinnerList {
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.8rem;
    color: var(--emui_text_primary);
    position: relative;
    padding: 0 1.2rem;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0.4rem;
}

.spinnerWrap .spinnerList .spinnerItem {
    width: 100%;
}

.spinnerWrap .spinnerList:after {
    position: absolute;
    width: calc(100% - 2.4rem);
    content: "";
    display: block;
    height: 0.1rem;
    bottom: 0;
    transform: scaleY(0.25);
    background: var(--emui_color_divider_horizontal);
    z-index: 101;
}

.spinnerWrap .spinnerList:last-child:after {
    display: none;
}

.spinnerWrap .checkedBg {
    background: var(--emui_accent3);
    border-radius: 1.2rem;
    color: var(--emui_accent2);
}
</style>
